<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Digital Clock UI</title>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body 
{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #2f363e;
}
#clock 
{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
}
#secDots,
#minDots,
#hrDots
{
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  rotate: 90deg;
}
#secDots::before,
#minDots::before,
#hrDots::before
{
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  box-shadow: 25px 25px 75px rgba(0,0,0,0.25),
  10px 10px 70px rgba(0,0,0,0.25),
  inset 5px 5px 10px rgba(0,0,0,0.5),
  inset 5px 5px 20px rgba(255,255,255,0.2),
  inset -5px -5px 15px rgba(0,0,0,0.75);
}

#secDots h2,
#minDots h2,
#hrDots h2
{
  position: absolute;
  text-align: center;
  transform: rotate(-90deg);
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 4em;
  font-weight: 500;
  color: var(--clr);
}
#secDots h2 span,
#minDots h2 span,
#hrDots h2 span
{
  position: absolute;
  font-size: 0.25em;
  font-weight: 500;
  bottom: 50px;
  text-transform: uppercase; 
  letter-spacing: 0.1em;
}
#secDots b 
{
  position: absolute;
  color: #fff;
  display: inline-flex;
  transform: rotate(-90deg) translate(-30px,90px);
}
#secDots .dot, 
#minDots .dot, 
#hrDots .dot 
{
  position: absolute;
  top: 50%;
  width: 10px;
  height: 3px;
  background: var(--clr);
  transform-origin: 100px;
}
#secDots .active.dot, 
#minDots .active.dot, 
#hrDots .active.dot 
{
  background: var(--clr);
  box-shadow: 0 0 10px var(--clr),
  0 0 20px var(--clr),
  0 0 30px var(--clr);
}
#secDots .active.dot ~ .dot, 
#minDots .active.dot ~ .dot, 
#hrDots .active.dot ~ .dot  
{
  background: #555;
}
#secDots .dot:nth-child(5n + 5),
#minDots .dot:nth-child(5n + 5)
{
  width: 20px;
}
#hrDots .dot
{
  width: 20px;
}
#hrDots .dot::before 
{
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 4px;
  height: 4px;
  border-radius: 4px;
  background: var(--clr);
  box-shadow: 1.5px 9px var(--clr),
  4px 18px var(--clr),
  7px 27px var(--clr);
}
#hrDots .dot.active ~.dot::before 
{
  background: #555;
  box-shadow: 1.5px 9px #555,
  4px 18px #555,
  7px 27px #555;
}
    </style>
</head>
<body>
  <div id="clock">
    <div id="hrDots" style="--clr:#ff2972;"></div>
    <div id="minDots" style="--clr:#fee800;"></div>
    <div id="secDots" style="--clr:#04fc43;"></div>
  </div>
  <script>
    function clock(){
      let secDots = document.getElementById('secDots');
      let minDots = document.getElementById('minDots');
      let hrDots = document.getElementById('hrDots');
 
      var date = new Date();
      var hours = date.getHours() % 12 // convert to 12-hour format
      var amPm = date.getHours() >= 12 ? 'PM' : 'AM';
      hours = hours === 0 ? 12 : hours; // handle midnight (0 hours)
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
 
      var secondsDots = '';
      for(var i = 1; i < 61; i++){
        var rotation = i * 6; //rotate each line by 6 degree
        if ( i === seconds){
          secondsDots += '<div class="dot active" style="transform: rotate('+rotation+'deg)"></div>';
        }
        else {
          secondsDots += '<div class="dot" style="transform: rotate('+rotation+'deg)"></div>';
        }
      }
 
 
      var minutesDots = '';
      for(var i = 1; i < 61; i++){
        var rotation = i * 6; //rotate each line by 6 degree
        if ( i === minutes){
          minutesDots += '<div class="dot active" style="transform: rotate('+rotation+'deg)"></div>';
        }
        else {
          minutesDots += '<div class="dot" style="transform: rotate('+rotation+'deg)"></div>';
        }
      }
 
      var hoursDots = '';
      for(var i = 1; i < 13; i++){
        var rotation = i * 30; //rotate each line by 30 degree
        if ( i === hours){
          hoursDots += '<div class="dot active" style="transform: rotate('+rotation+'deg)"></div>';
        }
        else {
          hoursDots += '<div class="dot" style="transform: rotate('+rotation+'deg)"></div>';
        }
      }
 
      secDots.innerHTML = secondsDots + '<b>' + amPm + '</b>' + '<h2>' + zero(seconds) + '<br><span>Seconds</span></h2>';
      minDots.innerHTML = minutesDots + '<h2>' + zero(minutes) + '<br><span>Minutes</span></h2>';
      hrDots.innerHTML = hoursDots + '<h2>' + zero(hours) + '<br><span>Hours</span></h2>';
    }
 
    // add zero in single digit number
    function zero(number){
      if (number < 10){
        return '0' + number;
      }
      return number;
    }
 
    setInterval(clock,1000);
</script>
</body>
</html>